<template>
  <div class="container">
    <div class="login-container">
        <el-form :model="loginForm" ref="loginFromRef" label-width="auto">
            <el-form-item>
                <span>宠家管理系统</span>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn" type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from 'vue'
import {getLogin} from '@/service/api/login'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
let loginForm = reactive({
    username:'',
    password:''
})
const router=useRouter()
async function login(){
    let res=await getLogin({
        username:loginForm.username,
        password:loginForm.password
    })
    if(res.data.code===400){
        ElMessage({
            message:'账号或密码错误',
            type:'error'
        })
    }else if(res.data.code===200){
        localStorage.setItem('denglu','1')
        router.replace({name:'Home'})
    }
}
</script>


<style lang="scss" scoped>
.container{
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: aqua;

    .login-container{
        width: 300px;
        height: 200px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        box-shadow: 0 6px 32px -7px rgba(0, 0, 0, 0.75);
        padding: 20px;

        .login-btn{
            width: 100%;
        }
    }
    }
</style>
